<template>
  <div class="pane-item" ref='paneItem' >
    <slot></slot>
  </div>
</template>

<script>
export default {
    data(){
        return {
            start:0,
            end:0,
            orientation:'horizontal',
            index:-1,
            originSpan:0,
            originNaborSpan:0,
            isCollapsed:false,
        }
    },
    props:{
        span:{
            type:Number,
            default:0,
        },
        min:{
            type:String,
            default:"0px"
        },
        max:{//暂时没有启用，请使用Min来设置
            type:String,
            default:"0px"
        },
        collapsed:{
            type:Boolean,
            default:false
        },
        collapsedSize:{
            type:Number,
            default:20,
        },
    },
    computed:{
        isHorizontal(){
            return this.orientation.toLowerCase() === 'horizontal';
        },
    },
    watch:{
        start(){
            this.refreshPosition();
        },
        end(){
            this.refreshPosition();
        }
    },
    created(){
    },
    mounted(){
        this.orientation = this.$parent.orientation;
        this.triggerSize = this.$parent.triggerSize;
    },
    methods:{
        refreshPosition(){
            if(this.isHorizontal){
                this.$refs.paneItem.style.left = `calc(${this.start*100}% + ${this.index>0?this.triggerSize:0}px)`;
                this.$refs.paneItem.style.right = `${(1-this.end)*100}%`;
                this.$refs.paneItem.style.width = null;
            }else{
                this.$refs.paneItem.style.top = `calc(${this.start*100}% + ${this.index>0?this.triggerSize:0}px)`;
                this.$refs.paneItem.style.bottom = `${(1-this.end)*100}%`;
                this.$refs.paneItem.style.height = null;
            }
            return 0 ;
        }
    }
}
</script>

<style>
.pane-item{
    position: absolute;
}
</style>